<template>
  <div class="main">
    <div class="title">
      <div>{{  `Virus lncRNA - Host miRNA: ${abbreviation}`  }}</div>
<!--      <div class="download">-->
<!--        <div class="btn" @click="downloadClick">-->
<!--          <span class="titl">Download data</span>-->
<!--          <i class="el-icon-download"></i>-->
<!--        </div>-->
<!--      </div>-->
    </div>

    <div class="right">
<!--      <div v-loading="loading" id="chartId" style="width: 100%;height: 800px"/>-->
      <general-table :loading="loading" :total="total" :list="list" :columns="columns" @refreshData="refreshData"/>

    </div>


  </div>
</template>

<script>

import GeneralTable from "@/views/components/generalTable.vue";
import {interList} from "@/api/interaction";

export default {
  name: "nodeView",
  components: {GeneralTable},
  data() {
    return {
      ruleForm: {
        abbreviation: null,
        pageNum: 1,
        pageSize: 10,
      },
      abbrLoading: false,

      isFristInto: true,
      abbreviation: null,
      list: [],
      total: 0,
      loading: false,
      columns: [
        {name: "miRNA", field: "mirna", width: "auto"},
        {name: "lncRNA name", field: "lncrnaName", width: "auto"},
        // {name: "Abbreviation", field: "abbreviation", width: "auto"},
        {name: "lncRNA ID", field: "lncrnaId", width: "auto"},
        {name: "host", field: "host", width: "auto"},
        {name: "Tot Score", field: "totScore", width: "auto"},
        {name: "Tot Energy", field: "totEnergy", width: "auto"},
        {name: "Max Score", field: "maxScore", width: "auto"},
        {name: "Max Energy", field: "maxEnergy", width: "auto"},
        {name: "Length1", field: "length1", width: "60"},
        {name: "Length2", field: "length2", width: "60"},
        {name: "Interaction position", field: "interactionPosition", width: "auto"},
        // {name: "Viral Family", field: "viralFamily", width: "auto"},
        {name: "Number of Interaction site", field: "numberInterSite", width: "100"},
      ],
    }
  },
  mounted() {
    this.abbreviation = this.$route.query.abbreviation
    this.ruleForm.abbreviation = this.abbreviation
    this.loadData()
  },
  methods: {

    async loadData() {
      this.loading = true
      const res = await interList(this.ruleForm)
      this.loading = false
      this.list = res.rows
      this.total = res.total
    },
    refreshData(pageNum, pageSize) {
      this.ruleForm.pageNum = pageNum;
      this.ruleForm.pageSize = pageSize;
      this.loadData()
    },
  }
}
</script>

<style lang="stylus" scoped>

.main /deep/ {
  .draggable-box {
    pointer-events: none;
  }

  .el-dialog__wrapper {
    pointer-events: none;

    .el-dialog {
      z-index 9999999;
      pointer-events: auto;
      margin 0!important
    }
  }

  .el-dialog__header {
    background-color: #11427d;
    color: #fff;
    font-size: 14px;
  }

  .el-dialog__headerbtn .el-dialog__close {
    color: #fff;
  }
}

.main {
  width 1170px
  margin-top 20px
  padding-top 10px
  font-family: Times New Roman;

  .infoItem {
    margin-bottom 10px

    .item-title {
      color #11427D
      font-weight 600
      margin-right 5px
    }
  }


  .title {
    font-size 22px
    text-align left
    margin-bottom 20px
    padding 15px 0
    color #11427D
    font-weight 600
    width 100%

    display flex
    justify-content: space-between;
  }

  .collapse /deep/{

    .abbrWarp {
      display flex
      flex-direction column

      .abbrItem {
        display flex
        word-break:break-word;
        margin-bottom 5px
        font-size 15px
        .abbrName {
          font-weight 600
          margin-right 10px
          width 90px
          text-align right
          line-height 1.2
        }
        .content {
          flex 1
          line-height 1.2
        }
      }
    }

    .el-collapse {
      border none
      background-color #f9f9f9
      border-radius 10px
    }
    .el-collapse-item__header {
      border none
      display flex
      align-items center
      background-color #f9f9f9
      border-radius 10px
      padding 0 15px
    }
    .el-collapse-item__wrap {
      border none
      background-color #f9f9f9
      border-bottom-left-radius 10px
      border-bottom-right-radius 10px
      padding 0 30px
    }
    .el-collapse-item__content {


    }
    .el-collapse-item__arrow {
      margin 0
      margin-left 10px
      color rgba(143, 143, 143, 0.7)
      /*display none*/
    }

    .tips {
      color rgba(143, 143, 143, 0.7)
      font-size 16px
      display flex
      flex-direction column
      align-items center
    }
  }

  .warp {
    display flex
    font-family: Times New Roman;
    margin-bottom: 20px;

    .sideWarp {
      padding-left: 20px;
      margin-right 30px
      flex-shrink: 0;
      .tagTitle {
        padding 0
        position: relative;
        font-size 20px
        font-weight 500
        color #0a2458
      }

      .tagTitle::before {
        background-color: #aa604f;
        content: "";
        width: 3px;
        height: 100%;
        position: absolute;
        top: 0;
        left: -20px;
        transition: .2s ease;
      }
    }

    .tagWarp /deep/ {
      display flex
      flex-wrap wrap
      align-items: center;
      width: 100%;

      //设置图标颜色
      .el-loading-spinner .path {
        stroke: #11427D;
      }
      .el-loading-spinner .circular {
        width 25px
        height 25px
      }

      .tag {
        color #989898
        margin-right 20px
        margin-bottom 20px
        font-size 20px
        font-weight 500
        cursor pointer
      }
      .tag:hover, .active {
        color #0a2458
        text-decoration underline
      }
    }
  }

  .download {
    display flex
    justify-content flex-end
    color #3a3a3a

    .btn {
      cursor pointer
    }
    .titl {
      display inset-block
      margin-right 8px
    }
    i {
      padding 8px
      background-color #eaeaea
    }
  }

  .right /deep/ {
    padding-top 30px
    border-radius 6px
    box-shadow: 0 2px 12px 0 rgba(193, 193, 193, 0.39);
    padding 30px 30px

    //设置图标颜色
    .el-loading-spinner .path {
      stroke: #11427D;
    }
  }

}
</style>
